<template>
  <div class="bg_fff p_20 mt_15">
    <div class="flexrowbetween mb_10">
      <span class="f-15 c_000">服务部门活动数量统计TOP10</span>
      <el-select
        v-model="value"
        placeholder="请选择"
        size="mini"
        class="infoselect"
        style="width: 90px"
        @change="getCount"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="flexend f-14" style="color:#606266">（个）</div>
    <div class="flex proitem" v-for="(item,index) in processlist" :key="index">
        <div class="flexname f-14">{{item.user_login}}</div>
        <el-progress :text-inside="true" :stroke-width="15" :format="format" :percentage="item.num" class="home-progress" style="width:calc(100% - 100px)"></el-progress>
    </div>
  </div>
</template>

<script>
import { userCount } from '@/api/home'
import { getData } from '@/utils/ruoyi'
export default {
  data() {
    return {
      value: 7,
      options: [
        { label: "近7天", value: 7 },
        { label: "近30天", value: 30 },
        { label: "近半年", value: 183 },
      ],
      processlist:[]
    };
  },
  created(){
    this.getCount()
  },
  methods:{
    getCount(){
      let parmas = {
        end: this.parseTime(new Date(),'{y}-{m}-{d}')
      }
      parmas.start = getData(-this.value)
      console.log(parmas)
      userCount(parmas).then(res=>{
        this.processlist = res.data
      })
    },

    format(percentage) {
      return percentage
    }
    // selectVal(){
    //   this.getCount()
    // }
  }
};
</script>

<style lang="scss" scoped>
.proitem{
    width: 100%;
    margin-top: 20px;
    .flexname{
        display: inline-block;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

</style>
<style lang="scss">
.infoselect{
  .el-input__inner{
    border: 0;
    background-color: #DFEEFD;
    color: #000;
  }
}
.el-progress-bar__inner{
    background: linear-gradient(90deg, #8DA6FF 0%, #1F52FF 100%);
}
.el-progress-bar__innerText{
    color: #fff!important;
    float: left;
}
</style>